<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Brain Agent - 语义搜索</title>
    <link rel="stylesheet" href="css/dark-theme.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 w-64 bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 bg-gray-700">
            <h1 class="text-xl font-bold">X-Brain Agent</h1>
        </div>
        <nav class="mt-4">
            <a href="index.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-home mr-3"></i>
                仪表盘
            </a>
            <a href="knowledge-base.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-book mr-3"></i>
                知识库
            </a>
            <a href="chat.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-comments mr-3"></i>
                智能对话
            </a>
            <a href="search.html" class="flex items-center px-6 py-3 bg-gray-700 text-white">
                <i class="fas fa-search mr-3"></i>
                语义搜索
            </a>
            <a href="agent.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-robot mr-3"></i>
                智能代理
            </a>
            <a href="file-manager.html" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-folder mr-3"></i>
                文件管理
            </a>
            <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
                <i class="fas fa-cog mr-3"></i>
                系统设置
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64 p-8">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
            <div>
                <h2 class="text-2xl font-bold">语义搜索</h2>
                <p class="text-gray-400">智能搜索您的知识库内容</p>
            </div>
            <div class="flex items-center space-x-4">
                <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-history mr-2"></i>
                    搜索历史
                </button>
                <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-cog mr-2"></i>
                    搜索设置
                </button>
            </div>
        </header>

        <!-- Search Box -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <div class="flex gap-4">
                <div class="flex-1">
                    <input type="text" placeholder="输入搜索关键词..."
                           class="w-full bg-gray-700 text-gray-100 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg flex items-center">
                    <i class="fas fa-search mr-2"></i>
                    搜索
                </button>
            </div>

            <!-- Search Filters -->
            <div class="flex items-center space-x-4 mt-4">
                <div class="flex items-center">
                    <input type="checkbox" id="docs" class="mr-2">
                    <label for="docs">文档</label>
                </div>
                <div class="flex items-center">
                    <input type="checkbox" id="images" class="mr-2">
                    <label for="images">图片</label>
                </div>
                <div class="flex items-center">
                    <input type="checkbox" id="code" class="mr-2">
                    <label for="code">代码</label>
                </div>
                <select class="bg-gray-700 text-gray-100 px-3 py-1 rounded ml-auto">
                    <option>相关性排序</option>
                    <option>时间排序</option>
                    <option>文件大小</option>
                </select>
            </div>
        </div>

        <!-- Search Results -->
        <div class="space-y-6">
            <!-- Result Item -->
            <div class="bg-gray-800 rounded-lg p-4 hover:bg-gray-700">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="text-lg font-medium text-blue-400 hover:text-blue-300">
                            <a href="#">知识库索引配置指南</a>
                        </h3>
                        <p class="text-gray-400 mt-1">详细介绍了如何配置和优化知识库索引，包括参数设置和性能调优建议。</p>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <span class="flex items-center">
                                <i class="fas fa-file-pdf mr-1"></i>
                                PDF文档
                            </span>
                            <span class="mx-2">•</span>
                            <span>2.5 MB</span>
                            <span class="mx-2">•</span>
                            <span>更新于 2小时前</span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-bookmark"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-share"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Result Item -->
            <div class="bg-gray-800 rounded-lg p-4 hover:bg-gray-700">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="text-lg font-medium text-blue-400 hover:text-blue-300">
                            <a href="#">RAGFlow 系统架构设计</a>
                        </h3>
                        <p class="text-gray-400 mt-1">系统整体架构设计文档，包含各个模块的详细说明和接口定义。</p>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <span class="flex items-center">
                                <i class="fas fa-file-word mr-1"></i>
                                Word文档
                            </span>
                            <span class="mx-2">•</span>
                            <span>1.8 MB</span>
                            <span class="mx-2">•</span>
                            <span>更新于 1天前</span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-bookmark"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-share"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Result Item -->
            <div class="bg-gray-800 rounded-lg p-4 hover:bg-gray-700">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="text-lg font-medium text-blue-400 hover:text-blue-300">
                            <a href="#">API 接口文档</a>
                        </h3>
                        <p class="text-gray-400 mt-1">RAGFlow API 接口文档，包含所有 REST API 的详细说明和示例代码。</p>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <span class="flex items-center">
                                <i class="fas fa-file-code mr-1"></i>
                                Markdown
                            </span>
                            <span class="mx-2">•</span>
                            <span>256 KB</span>
                            <span class="mx-2">•</span>
                            <span>更新于 3天前</span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-bookmark"></i>
                        </button>
                        <button class="text-gray-400 hover:text-white">
                            <i class="fas fa-share"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="flex justify-between items-center mt-8">
            <div class="text-gray-400">
                显示 1-3 条，共 24 条结果
            </div>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 disabled:opacity-50" disabled>
                    上一页
                </button>
                <button class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">1</button>
                <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600">2</button>
                <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600">3</button>
                <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600">
                    下一页
                </button>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
